<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>君兴堂病人信息管理系统</title>
    <link rel="stylesheet" href="/junxingtang/css/style.css">
</head>
<body>
<div class="container">

    <!-- 搜索栏 -->
    <div class="search-bar">
        <div class="search-group">
            <label>
                姓名：<input type="text" id="searchName" placeholder="请输入姓名进行查询">
            </label>
            <label>
                手机号：<input type="text" id="searchPhoneNumber" placeholder="请输入手机号进行查询">
            </label>
            <label>
                住址：<input type="text" id="searchAddress" placeholder="请输入住址进行查询">
            </label>
            <button onclick="search()">查询</button>
        </div>
        <button class="add-btn" onclick="showAddDialog()">新增患者</button>
    </div>

    <!-- 病人信息数据表格 -->
    <table id="patientTable">
        <thead>
            <tr>
                <th>序号</th>
                <th>照片</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>部位</th>
                <th>手机号码</th>
                <th>住址</th>
                <th>备注</th>
                <th>剩余次数</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tableBody">
        </tbody>
    </table>

    <!-- 分页控件 -->
    <div class="pagination">
        <button id="prevPage" onclick="changePage(-1)">上一页</button>
        <span id="pageInfo"></span>
        <button id="nextPage" onclick="changePage(1)">下一页</button>
    </div>

    <!-- 图片预览模态框，style="display:none;"设置初始不可见 -->
    <div id="photoModal" class="modal-mask" style="display:none;">
        <div class="modal-content">
            <span class="close-btn" onclick="closePhotoModal()">&times;</span>
            <img id="fullPhoto" class="full-photo">
        </div>
    </div>

    <!-- 新增患者弹窗 -->
    <div id="addDialog" class="dialog-mask" style="display:none;">
        <div class="dialog-content">
            <div class="dialog-header">
                <h3>新增患者</h3>
                <span class="close-btn" onclick="closeDialog()">&times;</span>
            </div>
            <div class="dialog-body">
                <form id="addForm">
                    <div class="form-group">
                        <label>照片：</label>
                        <div class="photo-upload-container">
                            <!-- 上传按钮 -->
                            <label class="upload-btn">
                                选择照片
                                <input type="file" id="addPhoto" style="display: none;" onchange="handlePhotoUpload(event)">
                            </label>
                            <!-- 预览区域 -->
                            <img id="photoPreview" src="#" alt="照片预览" style="display: none;">
                        </div>
                        <input type="hidden" id="photoName"><!-- 在照片表单组中添加隐藏域 -->
                    </div>
                    <div class="form-group">
                        <label>姓名：</label>
                        <input type="text" id="addName" required>
                    </div>
                    <!-- 修改新增弹窗中的性别选择部分 -->
                    <div class="form-group">
                        <label>性别：</label>
                        <select id="addGender" required>
                            <option value="" disabled selected>请选择性别</option>
                            <option value="0">女</option>
                            <option value="1">男</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>年龄：</label>
                        <input type="number" id="addAge" min="0" required>
                    </div>
                    <div class="form-group">
                        <label>部位：</label>
                        <div class="multi-select-wrapper">
                            <div class="custom-multi-select" onclick="toggleRegionDropdown()">
                                <div class="selected-regions">点击选择部位...</div>
                                <div class="dropdown-arrow">▼</div>
                            </div>
                            <div class="options-container" id="regionOptions"></div>
                            <input type="hidden" id="selectedRegions" name="regions">
                        </div>
                    </div>
                    <div class="form-group">
                        <label>手机号：</label>
                        <input type="tel" id="addPhone" pattern="1[3-9]\d{9}" required>
                    </div>
                    <!-- 新增住址和备注 -->
                    <div class="form-group">
                        <label>住址：</label>
                        <input type="text" id="addAddress">
                    </div>
                    <div class="form-group">
                        <label>备注：</label>
                        <textarea id="addRemark" rows="2"></textarea>
                    </div>
                    <div class="form-group">
                        <label>次数：</label>
                        <input type="number" id="addNumber" min="0" required>
                    </div>
                </form>
            </div>
            <div class="dialog-footer">
                <button onclick="closeDialog()">取消</button>
                <button class="confirm-btn" onclick="handleAddSubmit()">保存</button>
            </div>
        </div>
    </div>

    <!-- 编辑患者弹窗 -->
    <div id="editDialog" class="dialog-mask" style="display:none;">
        <div class="dialog-content">
            <div class="dialog-header">
                <h3 id="editTitle">编辑患者</h3>
                <span class="close-btn" onclick="closeEditDialog()">&times;</span>
            </div>
            <div class="dialog-body">
                <form id="editForm">
                    <input type="hidden" id="editId"> <!-- 隐藏域存储ID -->
                    <div class="form-group">
                        <label>照片：</label>
                        <div class="photo-upload-container">
                            <!-- 上传按钮 -->
                            <label class="upload-btn">
                                更换照片
                                <input type="file" id="editPhoto" style="display: none;" onchange="handleEditPhotoUpload(event)">
                            </label>
                            <!-- 预览区域 -->
                            <img id="editPhotoPreview" src="#" alt="照片预览" style="display: none;">
                        </div>
                        <input type="hidden" id="editPhotoName">
                    </div>
                    <div class="form-group">
                        <label>姓名：</label>
                        <input type="text" id="editName" required>
                    </div>
                    <div class="form-group">
                        <label>性别：</label>
                        <select id="editGender" required>
                            <option value="" disabled>请选择性别</option>
                            <option value="0">女</option>
                            <option value="1">男</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>年龄：</label>
                        <input type="number" id="editAge" min="0" required>
                    </div>
                    <div class="form-group">
                        <label>部位：</label>
                        <div class="multi-select-wrapper">
                            <div class="custom-multi-select" onclick="toggleEditRegionDropdown()">
                                <div class="selected-regions" id="editSelectedRegions">点击选择部位...</div>
                                <div class="dropdown-arrow">▼</div>
                            </div>
                            <div class="options-container" id="editRegionOptions"></div>
                            <input type="hidden" id="editSelectedRegionsInput" name="regions">
                        </div>
                    </div>
                    <div class="form-group">
                        <label>手机号：</label>
                        <input type="tel" id="editPhone" pattern="1[3-9]\d{9}" required>
                    </div>
                    <div class="form-group">
                        <label>住址：</label>
                        <input type="text" id="editAddress">
                    </div>
                    <div class="form-group">
                        <label>备注：</label>
                        <textarea id="editRemark" class="fixed-textarea" rows="2"></textarea>
                    </div>
                    <div class="form-group">
                        <label>次数：</label>
                        <input type="number" id="editNumber" min="0" required>
                    </div>
                </form>
            </div>
            <div class="dialog-footer">
                <button onclick="closeEditDialog()">取消</button>
                <button class="confirm-btn" onclick="handleEditSubmit()">保存</button>
            </div>
        </div>
    </div>

    <!-- 查看就诊记录弹窗 -->
    <div id="consultDialog" class="dialog-mask" style="display:none;">
        <div class="dialog-content" style="width: 600px;">
            <div class="dialog-header">
                <h3 id="consultDialogTitle">就诊记录</h3>
                <div>
                    <button class="add-btn" onclick="showAddConsultDialog()" style="margin-right: 15px;">新增就诊</button>
                    <span class="close-btn" onclick="closeConsultDialog()">&times;</span>
                </div>
            </div>
            <div class="dialog-body">
                <table style="margin-bottom: 15px;">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>就诊时间</th>
                        <th>使用次数</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="consultBody"></tbody>
                </table>
                <div class="pagination">
                    <button onclick="changeConsultPage(currentConsultPage - 1)">上一页</button>
                    <span id="consultPageInfo"></span>
                    <button onclick="changeConsultPage(currentConsultPage + 1)">下一页</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 查看就诊记录详情弹窗 -->
    <div id="detailDialog" class="dialog-mask" style="display:none; z-index:2000;">
        <div class="dialog-content" style="width: 400px;">
            <div class="dialog-header">
                <h3>调理部位详情</h3>
                <span class="close-btn" onclick="closeDetailDialog()">&times;</span>
            </div>
            <div class="dialog-body">
                <table style="width:100%; margin-top:10px;">
                    <thead>
                    <tr>
                        <th style="width:60%;">调理部位</th>
                        <th style="width:40%;">使用次数</th>
                    </tr>
                    </thead>
                    <tbody id="detailBody"></tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 编辑就诊记录弹窗 -->
    <div id="editConsultDialog" class="dialog-mask" style="display:none;">
        <div class="dialog-content" style="width: 600px;">
            <div class="dialog-header">
                <h3>调理部位编辑</h3>
                <div>
                    <button class="add-btn" onclick="addRegionRow('edit')" style="margin-right:15px;">新增部位</button>
                    <span class="close-btn" onclick="closeEditConsultDialog()">&times;</span>
                </div>
            </div>
            <div class="dialog-body">
                <table style="width:100%; margin-bottom:15px;">
                    <thead>
                    <tr>
                        <th style="width:60%;">调理部位</th>
                        <th style="width:40%;">使用次数</th>
                    </tr>
                    </thead>
                    <tbody id="editRegionBody"></tbody>
                </table>
                <div style="display: flex; justify-content: space-between;">
                    <div id="editTotalCount">共使用0次</div>
                    <div>
                        <button onclick="closeEditConsultDialog()">取消</button>
                        <button class="confirm-btn" onclick="handleEditConsultSubmit()" style="margin-left:10px;">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 新增就诊记录弹窗 -->
    <div id="addConsultDialog" class="dialog-mask" style="display:none;">
        <div class="dialog-content" style="width: 600px;">
            <div class="dialog-header">
                <h3>新增就诊记录</h3>
                <div>
                    <button class="add-btn" onclick="addRegionRow()" style="margin-right:15px;">新增部位</button>
                    <span class="close-btn" onclick="closeAddConsultDialog()">&times;</span>
                </div>
            </div>
            <div class="dialog-body">
                <table style="width:100%; margin-bottom:15px;">
                    <thead>
                    <tr>
                        <th style="width:60%;">调理部位</th>
                        <th style="width:40%;">使用次数</th>
                    </tr>
                    </thead>
                    <tbody id="regionBody"></tbody>
                </table>
                <div style="display: flex; justify-content: space-between;">
                    <div id="totalCount">共使用0条</div>
                    <div>
                        <button onclick="closeAddConsultDialog()">取消</button>
                        <button class="confirm-btn" onclick="handleAddConsultSubmit()" style="margin-left:10px;">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/junxingtang/js/app.js"></script>
</body>
</html>